<template>
  <div ref="container" @scrollend="scrollend" :class="[us.b()]">
    <div v-if="hasHeader" :class="[us.e('header')]">
      <slot name="header"/>
    </div>
    <div :class="[us.e('body')]">
      <slot name="body"/>
      <slot name="default"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {isEmpty, useNamespace} from "@/utils";
import {computed, nextTick, onActivated, onMounted, shallowRef, useSlots} from "vue";

const slots = useSlots();
const container = shallowRef();
const us = useNamespace('list-page')
defineOptions({
  name: 'ListPage',
})
const scrollTop = shallowRef(0);
onActivated(() => {
  nextTick(() => {
    container.value.scrollTop = scrollTop.value;
  })
})

function scrollend(event: any) {
  scrollTop.value = event.target.scrollTop
}

const hasHeader = computed(() => {
  return !isEmpty(slots.header);
})
</script>